<template>
  <!-- 表格 -->
  <div class="table">
    <el-table :data="list" stripe @selection-change="handleSelectionChange" :cell-style="{ 'text-align': 'center' }"
      border>
      <el-table-column align="center" prop="id" label="全选" type="selection">
      </el-table-column>
      <el-table-column align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" label="商品图片">
        <template #default="scope">
          <img :src="scope.row.pic" alt="">
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="商品名称">
        <template #default="scope">
          <div>{{ scope.row.name }}</div>
          <div>品牌：{{ scope.row.brandName }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sort" label="价格/货号">
        <template #default="scope">
          <div>价格:￥{{ scope.row.originalPrice }}</div>
          <div>货号：{{ scope.row.productSn }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="标签" width="140">
        <template #default="scope">
          <div>上架：
            <el-switch v-model="scope.row.publishStatus" :active-value="1" :inactive-value="0" />
          </div>
          <div>新品：
            <el-switch v-model="scope.row.newStatus" :active-value="1" :inactive-value="0" />
          </div>
          <div>推荐：
            <el-switch v-model="scope.row.recommandStatus" :active-value="1" :inactive-value="0" />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sort" label="排序"></el-table-column>
      <el-table-column align="center" prop="createTime" label="SKU库存">
        <div class="sku">
          <el-icon>
            <EditPen color="white" />
          </el-icon>
        </div>
      </el-table-column>
      <el-table-column align="center" prop="sale" label="销量"></el-table-column>
      <el-table-column align="center" prop="createTime" label="审核状态">
        <template #default="scope">
          <div>{{ scope.row.verifyStatus ? '审核通过' : '未审核' }}</div>
          <div>
            <el-button type="primary" link>审核详情</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="status" label="操作">
        <template #default="scope">
          <div>
            <el-button type="default">编辑</el-button>
          </div>
          <div>
            <el-button type="danger">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 底部 -->
  <div class="pagination">
    <!-- 批量操作 -->
    <div style="margin-top: 10px;">
      <el-select v-model="updateTable" placeholder="全部" size="large">
        <el-option v-for="(item, index) in updateOption" :key="item.txt" :value="item.txt" @click="updatefn(index)" />
      </el-select>
      <el-button type="primary" style="margin-left: 20px" @click="confirm">确定</el-button>
    </div>
    <!-- 分页 -->
    <el-pagination :page-sizes="[5, 10, 50, 100]" :default-page-size="5"
      layout="total, sizes, prev, pager, next, jumper" :total="paginateData.total" background
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>
  
<script setup lang='ts'>
import { nextTick, reactive, Ref, ref, toRefs, watch } from 'vue';
import * as http from "@/request/api"
import { useTable } from '@/hook/table'
import { useRouter } from 'vue-router'
import EventBus from '@/utils';
import { alertProps } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'

const router = useRouter()
let params = reactive<IProductList>({
  pageSize: 5,
})
let { list, paginateData, handleSizeChange, getData, handleCurrentChange } = useTable(http.product.ProductList, params)


// 搜索
EventBus.on('productSearch', async (val: IProductList) => {
  let { keyword, productSn, productCategoryId, brandId, publishStatus, verifyStatus } = val
  params.keyword = keyword
  params.productSn = productSn
  params.productCategoryId = productCategoryId
  params.brandId = brandId
  params.publishStatus = publishStatus
  params.verifyStatus = verifyStatus
  nextTick(() => {
    getData()
  })
})

// 编辑弹框
function edit(id: number) {
  router.push({ name: 'allocResource', query: { id: id } })
}

// 一键全选
const updateTable = ref('')
const updateOption = reactive([
  { http: http.product.ProductUpdatePublishStatus, txt: '商品上架', label: 'publishStatus', value: 1 },
  { http: http.product.ProductUpdatePublishStatus, txt: '商品下架', label: 'publishStatus', value: 0 },
  { http: http.product.ProductUpdateRecommendStatus, txt: '设为推荐', label: 'recommendStatus', value: 1 },
  { http: http.product.ProductUpdateRecommendStatus, txt: '取消推荐', label: 'recommendStatus', value: 0 },
  { http: http.product.ProductUpdateNewStatus, txt: '设为新品', label: 'newStatus', value: 1 },
  { http: http.product.ProductUpdateNewStatus, txt: '取消新品', label: 'newStatus', value: 0 },
  { http: http.product.ProductUpdateDeleteStatus, txt: '转移到分类', value: 0 },
  { http: http.product.ProductUpdateDeleteStatus, txt: '移入回收站', label: 'deleteStatus', value: 1 },
])

// 批量操作
const api = ref<any>('')
const idsdata = reactive<number[]>([])
// 请求参数
interface IUpdateParams {
  ids: string,
  publishStatus?: number,
  recommendStatus?: number,
  newStatus?: number,
  deleteStatus?: number;
  [index: string]: number | number[] | undefined | string
}
const updateParams = reactive<IUpdateParams>({
  ids: ''
})
// 选择批量操作类型
function updatefn(index: number) {
  api.value = updateOption[index].http
  let label = updateOption[index].label
  for (let key in updateParams) {
    if (key !== 'ids') {
      delete updateParams[key]
    }
  }
  if (label) {
    updateParams[label] = updateOption[index].value
  }
  console.log(updateParams);
}

// 勾选
function handleSelectionChange(val: { id: number }[]) {
  idsdata.splice(0, idsdata.length)
  val.map(item => {
    idsdata.push(item.id)
  })
  updateParams.ids = idsdata.join(',')
  console.log(updateParams.ids);
}
// 确定
async function confirm() {
  let app = api.value
  await app(updateParams)
  getData()
}

</script>
  
<style scoped>
.box-card {
  margin: 10px 0;
  height: 128px;
  font-size: 14px;
}

.box-card .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card .top span {
  margin: 0 8px;
}

.box-card .bottom {
  margin: 20px;
  color: gray;
}

.box-card .bottom input {
  border: 1px solid rgb(218, 216, 216);
  height: 26px;
  border-radius: 5px;
  margin-left: 8px;
  padding-left: 5px;
  color: rgb(201, 191, 191);
  font-size: 12px;
  outline-color: rgb(179, 175, 175);
}

.pagination {
  height: 40px;
  margin: 10px;
  padding-bottom: 10px;
  /* float: right; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sku {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #409eff;
  margin: 0 auto;
  line-height: 40px;
}
</style>